<template>
  <PageLayout class="form-container">
    <a-card>
      <div class="form-title">{{ route.query.id ? "编辑" : "新增" }}游戏</div>
      <div class="form-box w-600">
        <a-form :model="formState" :rules="rules" ref="formRef" layout="Vertical" :labelCol="{ style: { width: '150px' } }" :wrapperCol="{ style: { width: 'calc(100% - 150px)' } }">
          <a-form-item label="游戏名称" name="name" required>
            <a-input v-model:value="formState.name" placeholder="请输入游戏名称" :maxlength="50" />
          </a-form-item>
          <a-form-item label="所属动作类型" name="gameClassifyList" required>
            <a-select v-model:value="formState.gameClassifyList" placeholder="请选择所属动作类型" mode="multiple" :options="options" />
          </a-form-item>
          <a-form-item label="排序" name="sort" required>
            <a-input v-model:value="formState.sort" placeholder="请输入排序" :maxlength="50" />
          </a-form-item>
          <a-form-item label="支持系统" name="sources" required>
            <a-select v-model:value="formState.sources" placeholder="是否支持手柄" :options="[
                {
                  label: 'IOS',
                  value: 'APP_STORE',
                },
                {
                  label: '安卓',
                  value: 'GOOGLE_PLAY',
                },
                {
                  label: '安卓&IOS',
                  value: 'APP_STORE,GOOGLE_PLAY',
                },
              ]" />
          </a-form-item>
          <a-form-item label="是否支持手柄" name="handleFlag" required>
            <a-select v-model:value="formState.handleFlag" placeholder="是否支持手柄" :options="[
                {
                  label: '否',
                  value: 0,
                },
                {
                  label: '是',
                  value: 1,
                },
              ]" />
          </a-form-item>

          <a-form-item label="游戏封面" name="coverUrl" :rules="[{ required: true, message: '请上传游戏封面' }]">
            <UploadImg v-model:imageUrl="formState.coverUrl"></UploadImg>
          </a-form-item>
          <a-form-item label="游戏背景图" name="backgroundUrl" :rules="[{ required: true, message: '请上传游戏背景图' }]">
            <UploadImg v-model:imageUrl="formState.backgroundUrl"></UploadImg>
          </a-form-item>
          <a-form-item label="游戏视频" name="videoUrl"  >
            <upload-video v-model:videoUrl="formState.videoUrl"></upload-video>
          </a-form-item>

          <a-form-item label="Google Play下载地址" name="googlePlayUrl" required>
            <a-input v-model:value="formState.googlePlayUrl" placeholder="请输入Google Play下载地址" :maxlength="255" />
          </a-form-item>
          <a-form-item label="Appstore下载地址" name="appStoreUrl" required>
            <a-input v-model:value="formState.appStoreUrl" placeholder="请输入Appstore下载地址" :maxlength="255" />
          </a-form-item>
          <a-form-item label="所属语言" name="languages" required>
            <a-select v-model:value="formState.languages" placeholder="请选择所属语言" mode="multiple" :options="langeOptions" />
          </a-form-item>

          <a-button type="primary" class="float-right" style="width: 100px" @click="save">保存</a-button>
        </a-form>
      </div>
    </a-card>
  </PageLayout>
</template>

<script setup>
import {
  postGameAdd,
  postGameUpdate,
  postGameDetail,
  postGameClassifyList,
} from "@/api/common";
import { postMenuTreeList } from "@/api/system";
import { useStoreCommonEnum } from "@/store";
import { message } from "ant-design-vue";
import { onMounted } from "vue";
const storeCommonEnum = useStoreCommonEnum();

const route = useRoute();
const router = useRouter();
const formRef = ref(null);

const formState = reactive({
  id: "",
  name: "",
  gameClassifyList: undefined,
  sort: "",
  handleFlag: undefined,
  sources: undefined,
  coverUrl: "",
  backgroundUrl: "",
  googlePlayUrl: "",
  backgroundUrl: "",
  appStoreUrl: "",
  videoUrl: '',
  languages: ['en_US'],
  remark: "",
});
const treeData = ref([]);

function resetTreeData(tree) {
  let resultTree = [];
  tree.forEach((item) => {
    let btnList = item.childrenList?.filter((ele) => {
      return ele.menuType == "F";
    });
    let curComponent = {
      ...item,
      // children: item.childrenList,
      label: item.menuName,
      value: item.id,
      btnList,
    };
    console.log("curComponent", curComponent);
    curComponent.children = resetTreeData(item.childrenList);
    resultTree.push(curComponent);
  });

  return resultTree;
}
const options = ref([]);
/**
     * 语言-英文逗号分割
     * ar:阿拉伯语
     * da_DK:丹麦语
     * nl_NL:荷兰语
     * fi_FI:芬兰语
     * nb_NO:挪威语
     * pl_PL:波兰语
     * pt_PT:葡萄牙语(葡萄牙)
     * sv_SE:瑞典语
     * ko_KR:韩语
     * en_US:英语
     * fr_FR:法语
     * de_DE:德语
     * es_ES:西班牙语(西班牙)
     * it_IT:義大利语
     * ja_JP:日语
     * zh_TW:繁体中文
     */

   

   



const langeOptions = [
  {
    label: '阿拉伯语',
    value: 'ar',
  },
  {
    label: '丹麦语',
    value: 'da_DK',
  },
  {
    label: '荷兰语',
    value: 'nl_NL',
  },
  {
    label: '芬兰语',
    value: 'fi_FI',
  },
  {
    label: '挪威语',
    value: 'nb_NO',
  },
  {
    label: '波兰语',
    value: 'pl_PL',
  },
  {
    label: '葡萄牙语(葡萄牙)',
    value: 'pt_PT',
  },
  {
    label: '瑞典语',
    value: 'sv_SE',
  },
  {
    label: '韩语',
    value: 'ko_KR',
  },
  {
    label: '英语',
    value: 'en_US',
  },
  {
    label: '法语',
    value: 'fr_FR',
  },
  {
    label: '德语',
    value: 'de_DE',
  },
  {
    label: '西班牙语(西班牙)',
    value: 'sp_SA',
  },
  {
    label: '義大利语',
    value: 'it_IT',
  },
  {
    label: '日语',
    value: 'ja_JP',
  },
  {
    label: '繁体中文',
    value: 'zh_TW',
  },
 
]
onMounted(async () => {
  const res = await postGameClassifyList();
  console.log("res", res);
  options.value = res.data.map((item) => {
    return {
      label: item.nameTw,
      value: item.id,
    };
  });
  if (route.query.id) {
    postGameDetail({ id: route.query.id }).then((res) => {
      console.log("res---", res);
      for (let key in formState) {
        formState[key] = res.data[key];
      }
      formState.gameClassifyList =
        formState.gameClassifyList?.map((item) => item.id) || null;
        formState.languages = formState.languages?.split(',') || null;
    });
  }
});

const rules = {
  roleName: [{ required: true, message: "请输入用户名/姓名", trigger: "blur" }],
  username: [{ required: true, message: "请输入账号/邮箱", trigger: "blur" }],
  // menuIds: [{ required: true, message: "请选择部门", trigger: "blur" }],
};

const save = () => {
  formRef.value.validate().then(() => {
    const requestUrl = formState.id ? postGameUpdate : postGameAdd;
    let obj = {
      ...formState,
      languages: formState.languages.map(item => item).join(','),
    };
    requestUrl(obj).then(() => {
      message.success(formState.id ? "编辑成功" : "新增成功");
      router.go(-1);
    });
  });
};
</script>

<style lang="less" scoped>
.btn-box {
  margin-top: 24px;
  margin-left: 130px;
  :deep(.ant-btn) {
    margin-right: 16px;
  }
}
</style>
